<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2020-01-03 16:06
  PageName：b_addCityName.html
  Function：动态添加城市
-->

<head>
    <meta charset="UTF-8">
    <title>动态添加城市</title>

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                // 1.获取ul元素节点
                const ulEle = document.getElementById("ul1");

                // 2.创建城市文本节点
                // 深圳
                const textNode = document.createTextNode("深圳");

                // 3.创建li元素节点
                // <li></li>
                const liEle = document.createElement("li");

                // 4.将城市文本节点添加到li元素节点中去
                liEle.appendChild(textNode);

                // 5.将li添加到ul中去
                ulEle.appendChild(liEle);
            }
        }
    </script>
</head>

<body>
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>
</body>
</html>